<template>
  <view :style="colorStyle">
    <view class="infobox1">
      <view
        class="list"
        v-for="(item, index, key) in addressList"
        :key="key"
        @click="selectAddress(item)"
      >
        <view class="block1 flex aitems">
          <view class="infobox">
            <view class="info1 flex aitems">
              <view class="tip1">
                {{ item.province }} {{ item.city }} {{ item.district }}
                {{ item.address }}
              </view>
            </view>
            <view class="info2 flex aitems">
              <view class="tip2">
                {{ item.consignee }}
              </view>
              <view class="tip2" style="margin-left: 30rpx">
                {{ item.mobile }}
              </view>
            </view>
          </view>
        </view>
        <view class="block2 flex aitems between">
          <view
            class="info1 flex aitems"
            @click.stop="UserRegionIsDefault(index)"
          >
            <radio-group>
              <radio
                :checked="item.isDefault ? true : false"
                :activeBackgroundColor="`var(--view-theme)`"
                style="transform: scale(0.8)"
                color="var(--view-theme)"
              ></radio>
            </radio-group>
            <view :class="item.isDefault ? 'tip1 tip2' : 'tip1'">
              设为默认
            </view>
          </view>
          <view class="info2 flex aitems" v-if="!options.addStatus">
            <view
              class="tipbox1 flex aitems"
              @click.stop="gourl('/pages/user/addressSave?id=' + item.id)"
            >
              <view class="icon">
                <image src="@/static/img16.png" mode="widthFix" />
              </view>
              <view class="tip1"> 编辑 </view>
            </view>
            <view
              class="tipbox2 flex aitems"
              @click.stop="removeAddress(index)"
            >
              <view class="icon">
                <image src="@/static/img17.png" mode="widthFix" />
              </view>
              <view class="tip1"> 删除 </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <nodata v-if="addressList.length == 0"></nodata>
    <view style="height: 130rpx"> </view>
    <view class="infobox3">
      <view class="block1" @click="gourl('/pages/user/addressSave')">
        添加地址
      </view>
    </view>
  </view>
</template>

<script>
const app = getApp();
import { msg, back, showModal, go, loading, backtime } from "@/utils/wxAPI";
import {
  addressList,
  addressRemove,
  addressSet,
  updateAddress,
} from "@/servers/servers.js";
import { HTTP_STATUS } from "@/servers/config.js";
import colors from "@/mixins/color";
import { getToken, setStorage } from "../../utils/storage";
export default {
  mixins: [colors],
  data() {
    return {
      options: {},
      addressList: [
        // 	{
        // 	province: '广东省',
        // 	city: '广州市',
        // 	district: '白云区',
        // 	address: '详情地址',
        // 	consignee: '苏辉',
        // 	mobile: '15177786015',
        // 	isDefault: true
        // }, {
        // 	province: '广东省',
        // 	city: '广州市',
        // 	district: '白云区',
        // 	address: '详情地址',
        // 	consignee: '苏辉',
        // 	mobile: '15177786015',
        // 	isDefault: false
        // },
      ],
    };
  },
  async onLoad(options) {
    this.options = options;

    if (getToken()) {
      //有token执行
    } else {
      //没token执行
    }
  },
  async onShow() {
    if (getToken()) {
      //有token执行
      this.handlegetaddressList();
    }
  },
  /**** 方法层 ****/
  methods: {
    async handlegetaddressList() {
      this.addressList = [];
      let { data } = await addressList();
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        this.addressList = data.data;
      }
      uni.stopPullDownRefresh();
    },

    async UserRegionIsDefault(index) {
      let id = this.addressList[index].id;
      loading();
      let { data } = await addressSet({
        id,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        msg(data.msg);
        this.handlegetaddressList();
      }
    },
    removeAddress(index) {
      let id = this.addressList[index].id;
      showModal({
        t2: "确认删除该收货地址？",
      })
        .then(async () => {
          loading();
          let { data } = await addressRemove({
            id,
          });
          if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
            msg(data.msg);
            this.handlegetaddressList();
          }
        })
        .catch((err) => {});
    },

    selectAddress(e) {
      if (this.options.update) {
        showModal({
          t2: "是否将该订单修改为选中的地址?",
        }).then(async () => {
          loading();
          let { data } = await updateAddress({
            addressId: e.id,
            id: this.options.id,
          });
          if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
            msg(data.msg);
            backtime();
          }
        });
        return false;
      }
      if (this.options.addStatus) {
        //确认订单过来的，选择地址
        // let pages = getCurrentPages();
        // let prevPage = pages[pages.length - 2];
        // prevPage.addressinfo = e;
        // console.log(prevPage.addressinfo);
        setStorage("addressInfo", e);
        back();
      }
    },
    gourl(url) {
      go(url);
    },

    back() {
      back();
    },

    backtime() {
      backtime();
    },
  },
  /**** 方法层 ****/

  /***下拉刷新 触底刷新***/
  async onReachBottom() {},
  async onPullDownRefresh() {
    this.handlegetaddressList();
    // uni.stopPullDownRefresh()
  },
  /***下拉刷新 触底刷新***/
};
</script>
<style>
/* #ifdef MP-WEIXIN */
page {
  background: #f5f5f5;
}

/* #endif */
</style>
<style scoped lang="scss">
page {
  background: #f5f5f5;
}

.infobox1 {
  margin: 30rpx;
}

.infobox1 .addbox {
  justify-content: flex-end;
  margin: 30rpx 0;
}

.infobox1 .addbox .icon {
  width: 40rpx;
  height: 40rpx;
}

.infobox1 .addbox .tip1 {
  font-style: normal;
  font-weight: 700;
  font-size: 28rpx;
  color: #5ccedd;
  margin-left: 16rpx;
}

.infobox1 .list {
  background: #fff;
  border-radius: 20rpx;
  margin: 0 0 30rpx 0;
}

.infobox1 .list .block1 {
  border-bottom: 1px solid #d5dbe1;
  padding: 30rpx 0 50rpx;
  margin: 0 30rpx;
}

.infobox1 .list .block1 .icon {
  width: 80rpx;
  height: 80rpx;
}

.infobox1 .list .block1 .infobox {
  // width: calc(100% - 80rpx - 20rpx);
  // margin-left: 20rpx;
}

.infobox1 .list .block1 .infobox .info1 {
}

.infobox1 .list .block1 .infobox .info1 .tip1 {
  font-style: normal;
  font-weight: 700;
  font-size: 32rpx;
  color: #333;
}

.infobox1 .list .block1 .infobox .info1 .tip2 {
  font-style: normal;
  font-weight: 400;
  font-size: 28rpx;
  color: #8a939c;
  margin-left: 30rpx;
}

.infobox1 .list .block1 .infobox .info2 {
  margin-top: 20rpx;
}

.infobox1 .list .block1 .infobox .info2 .tip1 {
  width: 70rpx;
  height: 40rpx;
  background: #5ccedd;
  border-radius: 10rpx;
  font-style: normal;
  font-weight: 400;
  font-size: 20rpx;
  color: #ffffff;
  text-align: center;
  line-height: 40rpx;
  position: absolute;
}

.infobox1 .list .block1 .infobox .info2 .tip2 {
  font-style: normal;
  font-weight: 400;
  font-size: 24rpx;
  color: #666;
}

.infobox1 .list .block2 {
  height: 100rpx;
  padding: 0 30rpx;
}

.infobox1 .list .block2 .info1 {
}

.infobox1 .list .block2 .info1 .icon {
  width: 36rpx;
  height: 36rpx;
}

.infobox1 .list .block2 .info1 .tip1 {
  font-style: normal;
  font-weight: 400;
  font-size: 24rpx;
  color: #8a939c;
  margin-left: 14rpx;
}

.infobox1 .list .block2 .info1 .tip2 {
  font-style: normal;
  font-weight: 400;
  font-size: 24rpx;
  color: var(--view-theme) !important;
  margin-left: 14rpx;
}

.infobox1 .list .block2 .info2 {
}

.infobox1 .list .block2 .info2 .tipbox1 {
}

.infobox1 .list .block2 .info2 .tipbox1 .icon {
  width: 30rpx;
  height: 25.59rpx;
}

.infobox1 .list .block2 .info2 .tipbox1 .tip1 {
  font-style: normal;
  font-weight: 400;
  font-size: 24rpx;
  color: #8a939c;
  margin-left: 14rpx;
  position: relative;
  top: 2rpx;
}

.infobox1 .list .block2 .info2 .tipbox2 {
  margin-left: 70rpx;
}

.infobox1 .list .block2 .info2 .tipbox2 .icon {
  width: 30rpx;
  // height: 24rpx;
}

.infobox1 .list .block2 .info2 .tipbox2 .tip1 {
  font-style: normal;
  font-weight: 400;
  font-size: 24rpx;
  color: #8a939c;
  margin-left: 14rpx;
  position: relative;
  top: 2rpx;
}

.infobox2 {
  color: #5ccedd;
  font-size: 28rpx;
  font-weight: 400;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #5ccedd;
}

.infobox3 {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #fff;
  padding: 0 0 50rpx 0;

  .block1 {
    margin: 10rpx 30rpx 0;
    background: var(--view-theme);
    border-radius: 40rpx;
    text-align: center;
    height: 80rpx;
    line-height: 80rpx;
    color: #fff;
    font-size: 28rpx;
    font-weight: bold;
  }

  .block2 {
    margin: 30rpx 0 0;

    .info1 {
      width: 32rpx;
    }

    .info2 {
      margin-left: 10rpx;

      .tip1 {
        color: #999;
        font-size: 24rpx;
      }

      .tip2 {
        font-size: 24rpx;
        color: #f65b49;
      }
    }
  }
}

image {
  width: 100%;
  height: 100%;
}
</style>
